<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/masterPage.xhtml">
	<ui:define name="content">
		<style type="text/css">
			.panelColumns td {
				vertical-align: top;
			}
		</style>
		<div align="center"
			style="margin: 100px; margin-left: 150px; margin-right: 150px;">
			<h:form id="form">
				<p:dialog id="eventDialog" widgetVar="eventDialog" resizable="false"
					showEffect="explode" hideEffect="explode">
					<p:panelGrid id="eventDialogGrid" styleClass="panelColumns">
						<p:row>
							<p:column>
								<p:panelGrid columns="2">
									<h:outputLabel value="Session ID: " style=" font-size: 9pt;" />
									<h:outputLabel value="#{sessionBean.selectedSession.id}"
										style=" font-size: 9pt;" />
									<h:outputLabel value="Status: " style=" font-size: 9pt;" />
									<h:outputLabel
										value="#{sessionBean.selectedSession.state.name}"
										style=" font-size: 9pt;" />
									<h:outputLabel value="Supplier: " style=" font-size: 9pt;" />
									<h:outputLabel
										value="#{sessionBean.selectedSession.supplier.name}"
										style=" font-size: 9pt;" />
									<h:outputLabel value="Start date: " style=" font-size: 9pt;" />
									<h:outputLabel value="#{sessionBean.selectedSession.startDate}"
										style=" font-size: 9pt;" />
									<h:outputLabel value="End date: " style=" font-size: 9pt;" />
									<h:outputLabel value="#{sessionBean.selectedSession.endDate}"
										style=" font-size: 9pt;" />
									<h:outputLabel value="Duration: " style=" font-size: 9pt;" />
									<h:outputLabel value="#{sessionBean.selectedSession.duration}"
										style=" font-size: 9pt;" />
									<h:outputLabel value="Total items: " style=" font-size: 9pt;" />
									<h:outputLabel
										value="#{sessionBean.selectedSession.itemsCount}"
										style=" font-size: 9pt;" />
								</p:panelGrid>
							</p:column>
							<p:column>
								<p:contextMenu for="eventsTable">
									<p:menuitem value="View" update=":form:eventStatusDialogGrid"
										icon="ui-icon-search" oncomplete="eventStatusDialog.show()"
										style=" font-size: 9pt;" />
								</p:contextMenu>

								<p:dataTable id="eventsTable" var="event"
									value="#{sessionBean.selectedSession.sessionEvents}"
									selection="#{sessionBean.selectedEvent}" selectionMode="single"
									rowKey="#{event.id}" paginator="true" rows="6">
									<p:column headerText="Id" style=" font-size: 9pt;">
										<h:outputText value="#{event.id}" style=" font-size: 9pt;" />
									</p:column>
									<p:column headerText="Status" style=" font-size: 9pt;">
										<h:outputText value="#{event.eventType.name}"
											style=" font-size: 9pt;" />
									</p:column>
									<p:column headerText="Name" style=" font-size: 9pt;">
										<h:outputText value="#{event.name}" style=" font-size: 9pt;" />
									</p:column>
									<p:column headerText="Timestamp" style=" font-size: 9pt;">
										<h:outputText value="#{event.eventDate}"
											style=" font-size: 9pt;" />
									</p:column>
								</p:dataTable>
								<div style="text-align: right; font-size: 9pt;">*right
									click to submenu</div>
							</p:column>
						</p:row>
					</p:panelGrid>
				</p:dialog>

				<p:dialog widgetVar="eventStatusDialog" resizable="false"
					showEffect="explode" hideEffect="explode">
					<p:panelGrid id="eventStatusDialogGrid" columns="2">
						<h:outputLabel value="Event ID: " style=" font-size: 9pt;" />
						<h:outputLabel value="#{sessionBean.selectedEvent.id}"
							style=" font-size: 9pt;" />
						<h:outputLabel value="Name: " style=" font-size: 9pt;" />
						<h:outputLabel value="#{sessionBean.selectedEvent.name}"
							style=" font-size: 9pt;" />
						<h:outputLabel value="Timestamp: " style=" font-size: 9pt;" />
						<h:outputLabel value="#{sessionBean.selectedEvent.eventDate}"
							style=" font-size: 9pt;" />
						<h:outputLabel value="Session ID: " style=" font-size: 9pt;" />
						<h:outputLabel value="#{sessionBean.selectedEvent.session.id}"
							style=" font-size: 9pt;" />
						<h:outputLabel value="Description: " style=" font-size: 9pt;" />
						<p:inputTextarea readonly="true" cols="30" rows="10"
							value="#{sessionBean.selectedEvent.description}"
							style=" font-size: 9pt;" />
					</p:panelGrid>
				</p:dialog>

				<p:contextMenu for="sessionsTable">
					<p:menuitem value="View" update=":form:eventDialogGrid"
						icon="ui-icon-search" oncomplete="eventDialog.show()"
						style=" font-size: 9pt;" />
				</p:contextMenu>

				<p:dataTable id="sessionsTable" var="ses"
					value="#{sessionBean.sessions}" rowKey="#{ses.id}"
					selection="#{sessionBean.selectedSession}" selectionMode="single"
					paginator="true" rows="10">
					<p:column headerText="Id" style=" font-size: 9pt;">
						<h:outputText value="#{ses.id}" style=" font-size: 9pt;" />
					</p:column>
					<p:column headerText="Status" filterBy="#{ses.state.name}"
						style=" font-size: 9pt;">
						<h:outputText value="#{ses.state.name}" style=" font-size: 9pt;" />
					</p:column>
					<p:column headerText="Supplier" filterBy="#{ses.supplier.name}"
						style=" font-size: 9pt;">
						<h:outputText value="#{ses.supplier.name}"
							style=" font-size: 9pt;" />
					</p:column>
					<p:column headerText="StartDate" style=" font-size: 9pt;">
						<h:outputText value="#{ses.startDate}" style=" font-size: 9pt;" />
					</p:column>
					<p:column headerText="EndDate" style=" font-size: 9pt;">
						<h:outputText value="#{ses.endDate}" style=" font-size: 9pt;" />
					</p:column>
					<p:column headerText="ItemsCount" filterBy="#{ses.itemsCount}"
						style=" font-size: 9pt;">
						<h:outputText value="#{ses.itemsCount}" style=" font-size: 9pt;" />
					</p:column>
				</p:dataTable>
				<div style="text-align: right; font-size: 9pt;">*right click
					to submenu</div>
			</h:form>
		</div>

	</ui:define>
</ui:composition>